<template>
  <div class="home app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="首页"></header-nav>
    </div>
    <carousel-card
      v-if="carouselList.length"
      v-model:carouselList="carouselList"
    ></carousel-card>
    <div class="circles">
      <div class="circle" v-for="item in menu" @click="jump(item)">
        <img :src="item.image" />
        <div>{{ item.title }}</div>
      </div>
    </div>
    <div class="tuijian">
      <div v-for="item in guides" class="each-guide" @click="toDetail(item)">
        <img :src="item.cover" alt="">
        <div class="right">
          <div class="title">{{item.title}}</div>
          <div class="content">{{item.content}}</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Home">
import { getBooks, getGuide } from "@/api/http.js";
const { useHome } = $globalStore;
import swiperImage1 from "@/assets/swiper/swiper.png";
import swiperImage2 from "@/assets/swiper/swiper2.png";
import menuImage1 from "@/assets/index/指南.png";
import menuImage2 from "@/assets/index/食谱.png";
import menuImage3 from "@/assets/index/估重.png";
import menuImage4 from "@/assets/index/排行.png";
const router = useRouter();
let carouselList = reactive([
  {
    image: swiperImage1,
    width: "100vw",
    height: "300px",
  },
  {
    image: swiperImage2,
    width: "100vw",
    height: "300px",
  },
]);
let menu = reactive([
  {
    image: menuImage1,
    title: "饮食指南",
  },
  {
    image: menuImage2,
    title: "食谱推荐",
  },
  {
    image: menuImage3,
    title: "食物估重",
  },
  {
    image: menuImage4,
    title: "食物排行",
  },
]);

let guides = ref([])

const jump = (item) => {
  console.log(item);
  if (item.title == "食物估重") {
    router.push(`/weight`);
  } else if (item.title == "食物排行") {
    router.push(`/weightRank`);
  } else if (item.title == "食谱推荐") {
    router.push(`/book`);
  } else {
    router.push(`/guide`);
  }
};

const toDetail = (item) => {
  router.push(`/guideInfo/${item.id}`);
}

onMounted(() => {
  getGuide().then(res => {
    console.log(res.data)
    guides.value = res.data.filter(v => v.type === '热门推荐')
  })
});
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.circles {
  padding: 20px;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;

  .circle {
    display: flex;
    flex-direction: column;
    img {
      width: 40px;
      height: 40px;
      margin-left: 20px;
    }
    div {
      width: 80px;
      text-align: center;
      margin-top: 12px;
      font-weight: bold;
      font-size: 14px;
    }
  }
}

.books {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .book {
    width: 46%;
    margin: 20px 2%;
    img {
      width: 100%;
      height: 100px;
    }
    .title {
      font-size: 14px;
      width: calc(100% - 8px);
      background: #fff;
      padding: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* 设置你想显示的最大行数 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.tuijian {
  width: 90%;
  margin: 20px 5%;
  font-size: 14px;
  height: 50vh;
  overflow: hidden;
  overflow-y: scroll;

  .each-guide {
    width: 100%;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    img {
      width: 100px;
      height: 80px;
    }

    .right {
      width: calc(100% - 120px);
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      width: 100%;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示为省略号 */
      width: 100%; /* 设置一个宽度，或者通过其他方式确定宽度 */
    }
    .content {
      color: #666;
      margin-top: 6px;
      display: -webkit-box; /* 必须结合的属性 */
      -webkit-box-orient: vertical; /* 必须结合的属性 设置垂直排列*/
      -webkit-line-clamp: 3; /* 这里设置行数 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示为省略号 */
    }
  }
}
</style>
